- page_title _('SSH Keys')
- add_page_specific_style 'page_bundles/profile'
- @force_desktop_expanded_sidebar = true
- add_form_class = 'gl-display-none' if !form_errors(@key)
- hide_class = 'gl-display-none' if form_errors(@key)

.settings-section.js-search-settings-section
  .settings-sticky-header
    .settings-sticky-header-inner
      %h4.gl-my-0
        = page_title
  %p.gl-text-secondary
    = _('SSH keys allow you to establish a secure connection between your computer and GitLab.')
    - config_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_instance_configuration_url }
    = html_escape(s_('SSH fingerprints verify that the client is connecting to the correct host. Check the %{config_link_start}current instance configuration%{config_link_end}.')) % { config_link_start: config_link_start, config_link_end: '</a>'.html_safe }

  = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card js-toggle-container' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body gl-px-0' }) do |c|
    - c.with_header do
      .gl-new-card-title-wrapper
        %h3.gl-new-card-title
          = _('Your SSH keys')
        .gl-new-card-count
          = sprite_icon('key', css_class: 'gl-mr-2')
          = @keys.count
      .gl-new-card-actions
        = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: "js-toggle-button js-toggle-content #{hide_class}" }) do
          = _('Add new key')
    - c.with_body do
      .gl-new-card-add-form.gl-m-3.js-toggle-content{ class: add_form_class }
        %h4.gl-mt-0
          = _('Add an SSH key')
        %p
          - help_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/ssh.md') }
          = _('Add an SSH key for secure access to GitLab. %{help_link_start}Learn more%{help_link_end}.').html_safe % {help_link_start: help_link_start, help_link_end: '</a>'.html_safe }
        = render 'form'

      = render 'key_table', hide_class: hide_class
